<script lang='ts' setup>
import { onMounted, ref } from 'vue'
import { getAllSolid } from '@/api/map'
import { pointTogeojson } from './pointToGeoJson'
import { type FeatureCollection } from 'geojson'
import { VumGeoJsonDataSource, __VumGeoJsonDataSource, VumDataSourceConstantPopup } from 'vuesium'
import { type Entity, BillboardGraphics, JulianDate } from 'cesium'
const baseUrl = import.meta.env.VITE_APP_BASE_URL

const solidGeojson = ref<FeatureCollection>()
const layload: __VumGeoJsonDataSource.OnLoad = ({ dataSource }) => {
  const entities = dataSource.entities.values
  entities.forEach(entity => {
    entity.billboard = new BillboardGraphics({
      image: baseUrl + '/imgs/waste.png'
    })
  })
}
const layerClick: __VumGeoJsonDataSource.OnClick = ({ event }) => {
  const entity: Entity = event.feature.id
  let fid: number = entity.properties?.getValue(JulianDate.now()).FID
  const dom: HTMLDivElement | null = document.querySelector("#onemap-popupid-" + fid)
  if (dom) {
    dom.style.display = 'block'
  }
}
const closeClick = (e: MouseEvent) => {
  let box: HTMLDivElement = (e.target as any).parentNode.parentNode
  if (box) box.style.display = 'none'
}
const lineArr: Array<string> = ["name", "areaName", "createTime", "checkTime"]
const lineArrs: { name: string, key: string }[] = [{
  name: "点位名称",
  key: 'name'
}, {
  name: '地区名称',
  key: "areaName"
}, {
  name: '创建时间',
  key: 'createTime'
}, {
  name: "核查时间",
  key: "checkTime"
}]


onMounted(async () => {
  const list = await getAllSolid()
  solidGeojson.value = pointTogeojson(list.data)
})
</script>
<template>
  <VumGeoJsonDataSource cursor="pointer" :model-value="solidGeojson" @load="layload" @click="layerClick">
    <VumDataSourceConstantPopup>
      <template #default="{ attributes }">
        <div v-show="false" :id="'onemap-popupid-' + attributes.FID" class="onemap-popup-x">
          <div style="height: 3rem;" sk-flex="row-end-center">
            <span style="margin-right: 1rem;cursor: pointer;" @click="closeClick">X</span>
          </div>
          <div v-for="(item, index) in lineArrs" :key="index" class="popup-line" sk-flex="row">
            <div style="width: 35%;color: rgba(0,0,255,0.8);">{{ item.name + ":" }}</div>
            <div style="flex: 1;">{{ attributes[item.key] }}</div>
          </div>
        </div>
      </template>
    </VumDataSourceConstantPopup>
  </VumGeoJsonDataSource>
</template>
<style lang='scss' scoped>
.onemap-popup-x {
  width: 15rem;
  height: 16rem;
  transform: translateY(-100%);
  background-color: rgba(255, 255, 255, 1);
  box-sizing: border-box;
  padding: 0.5em;
}

.popup-line {
  height: 2.5rem;
  font-size: 0.9em;
}
</style>